<template>
    <dl class="list">
        <dt @click="isShow = !isShow">
            <span class="tit">待处理事务</span>
        </dt>
        <el-collapse-transition>
            <dd class="zd" v-show="isShow" v-loading="loading">
                <el-row>
                    <el-col :span="8">
                        <div class="item">
                            <p>待付款订单</p>
                            <p>(<span>10</span>)</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="item">
                            <p>已完成订单</p>
                            <p>(<span>10</span>)</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="item">
                            <p>待确认退货订单</p>
                            <p>(<span>10</span>)</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="item">
                            <p>待发货订单</p>
                            <p>(<span>10</span>)</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="item">
                            <p>新缺货登记</p>
                            <p>(<span>10</span>)</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="item">
                            <p>待处理退款申请</p>
                            <p>(<span>10</span>)</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="item">
                            <p>已发货订单</p>
                            <p>(<span>10</span>)</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="item">
                            <p>待处理退货订单</p>
                            <p>(<span>10</span>)</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="item">
                            <p>广告位即将到期</p>
                            <p>(<span>10</span>)</p>
                        </div>
                    </el-col>
                </el-row>
            </dd>
        </el-collapse-transition>
    </dl>
</template>

<script>
export default {
    name: '',
    components: {

    },
    data() {
        return {
            loading: false,
            isShow: true,
        }
    },
    created() {

    },
    methods: {

    },
}

</script>
<style scoped lang='scss'>
.list {
    width: 100%;
    overflow: hidden;
    .tit {
        display: block;
        padding: 20px 0;
        width: 100%;
        border: 1px solid rgb(228, 228, 228);
        background-color: rgb(243, 243, 243);
        padding-left: 20px;
        font-weight: 600;
        font-size: 16px;
    }
    .zd {
        width: 100%;
        padding: 0 0 20px;
        background: #ffffff;
        border: 1px solid rgb(228, 228, 228);
        border-top: 0;
        .item {
            width: 80%;
            margin: 20px auto 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgb(228, 228, 228);
            cursor: pointer;
            p {
                span {
                    color: #f04892;
                }
            }
        }
    }
}
</style>